/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class AwesomeProject extends Component {
  render() {
    return (
      // <View style = {styles.mainStyle}>
        //     <View style = {styles.greenStyle}>
        //         <View style={styles.yellowStyle}></View>
        //     </View>
        //
        //
        // </View>
        <View style = {styles.tempStyle}>
            <View style={styles.childStyle}>
                <Text>1</Text>
            </View>
            <View style={styles.childStyle}>
                <Text>2</Text>
            </View>
            <View style={[styles.childStyle,{alignSelf:'flex-end'},{backgroundColor:"green"}]}>
                <Text>3</Text>
            </View>
            <View style={styles.childStyle}>
                <Text>4</Text>
            </View>


        </View>
    );
  }
}

// margin可能跟width,height冲突
// 绝对定位:参照父控件
const styles = StyleSheet.create({
    mainStyle:{
        // 占据全屏
        flex:1,
        backgroundColor:'red' 
    },
    greenStyle:{
        backgroundColor:'green',
        width:200,
        height:200,
        marginTop:100,
        marginLeft:50,
        // borderWidth:1,
        // borderColor:'white',
        // borderRadius:100  圆角
        // paddingTop:30 // 内边距 内容下移
    },
    yellowStyle:{
        backgroundColor:'yellow',
        width:100,
        height:100,
        position:'absolute', // 绝对定位
        bottom:0,
        right:0,

        // position:'relative', // 相对定位
        // top:-10
    },
    tempStyle:{
        flex:1,
        backgroundColor:'red',
        flexDirection:'row',
        // flexDirection:'column',// 默认
        marginTop:30,
        flexWrap:'wrap',// 换行
        justifyContent:'center',// 用的非常多
        alignItems:'center',// 侧轴
    },
    childStyle:{
        width:60,
        height:60,
        backgroundColor:'yellow',
        marginLeft:10,
        marginTop:10,
        justifyContent:'center',// 用的非常多
        alignItems:'center',// 侧轴
    },
    threeStyle:{
        width:60,
        height:60,
        backgroundColor:'yellow',
        marginLeft:10,
        marginTop:10,
        justifyContent:'center',// 用的非常多
        alignItems:'center',// 侧轴
        alignSelf:'flex-start'
    }

});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
